<template>
  <div class="home">
    <el-button type="primary" @click="onExport" class="export-btn">导出下方区域为png图片</el-button>
    <div ref="proReport">
      <h1>市属国有重点企业生产安全事故月度统计表</h1>
      <h2>一、2023年11月生产安全事故情况</h2>
      <el-table :data="tableData" border>
        <el-table-column prop="index" label="起数(起)" align="center" />
        <el-table-column prop="index" label="死亡(含失踪人)" align="center" />
        <el-table-column prop="index" label="受伤(人)" align="center" />
        <el-table-column prop="index" label="直接经济损失(万元)" align="center" />
        <el-table-column label="其中死亡事故" align="center">
          <el-table-column label="一次死亡(1-2人)" align="center">
            <el-table-column prop="index" label="起数(起)" align="center" />
            <el-table-column prop="index" label="死亡(人)" align="center" />
          </el-table-column>
          <el-table-column label="一次死亡(3-9人)" align="center">
            <el-table-column prop="index" label="起数(起)" align="center" />
            <el-table-column prop="index" label="死亡(人)" align="center" />
          </el-table-column>
          <el-table-column label="一次死亡(30人以上)" align="center">
            <el-table-column prop="index" label="起数(起)" align="center" />
            <el-table-column prop="index" label="死亡(人)" align="center" />
          </el-table-column>
        </el-table-column>
      </el-table>
      <p class="remark">备注: {{ remark }}</p>
      <h2>二、2023年11月安全生产工作情况</h2>
      <el-table :data="tableData" border>
        <el-table-column label="重大危险源等级建档" align="center">
          <el-table-column prop="index" label="(处)" align="center" />
        </el-table-column>
        <el-table-column label="对危险源定期评估与检测" align="center">
          <el-table-column prop="index" label="(次)" align="center" />
        </el-table-column>
        <el-table-column label="组织开展安全检查" align="center">
          <el-table-column prop="index" label="(次)" align="center" />
        </el-table-column>
        <el-table-column label="查出安全生产隐患" align="center">
          <el-table-column prop="index" label="(处)" align="center" />
        </el-table-column>
        <el-table-column label="治理安全生产隐患" align="center">
          <el-table-column prop="index" label="(处)" align="center" />
        </el-table-column>
        <el-table-column label="生产岗位职工人数" align="center">
          <el-table-column prop="index" label="(人)" align="center" />
        </el-table-column>
        <el-table-column label="安全生产职工培训" align="center">
          <el-table-column prop="index" label="(人)" align="center" />
        </el-table-column>
        <el-table-column label="安全生产投入资金" align="center">
          <el-table-column prop="index" label="(万元)" align="center" />
        </el-table-column>
      </el-table>
      <el-table :data="tableData" border class="table-bottom">
        <el-table-column label="安全生产专题会议" align="center">
          <el-table-column prop="index" label="(次)" align="center" />
        </el-table-column>
        <el-table-column label="处理事故责任人" align="center">
          <el-table-column prop="index" label="(人)" align="center" />
        </el-table-column>
        <el-table-column label="安全生产未遂事故" align="center">
          <el-table-column prop="index" label="(件)" align="center" />
        </el-table-column>
        <el-table-column label="安全生产未遂事故处理" align="center">
          <el-table-column prop="index" label="(件)" align="center" />
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas' // 导出图片
export default {
  name: 'TestView',
  data() {
    return {
      tableData: [{ index: 1 }],
      remark: '这是一段备注',
    }
  },
  methods: {
    // 方法3 该方法导出图片不模糊
    onExport() {
      // this.frequentlyToastShow = true;
      // this.toastHide = this.$message.loading("正在生成下载操作", 0);
      const canvas = document.createElement("canvas")
      let canvasBox = this.$refs.proReport
      const width = parseInt(window.getComputedStyle(canvasBox).width)
      const height = parseInt(window.getComputedStyle(canvasBox).height)
      // console.log('宽为---', width, '--高为--', height);
      // 宽高 放大N倍 是为了防止图片模糊
      canvas.width = width * 4.125
      canvas.height = height * 4.126
      canvas.style.width = width + 'px'
      canvas.style.height = height + 'px'
      const context = canvas.getContext("2d")
      context.scale(4.125, 4.126)
      const options = {
        backgroundColor: '#fff',
        canvas: canvas,
        useCORS: true
      }
      html2canvas(canvasBox, options).then((canvas) => {
        // this.frequentlyToastShow = false;
        // setTimeout(this.toastHide, 0);
        let dataURL = canvas.toDataURL("image/png")
        if (dataURL !== "") {
          let a = document.createElement('a')
          a.href = dataURL
          a.download = '统计表'
          a.click()
          this.qrCodeShow = false
        }
      })
    },
    // 方法2 该方法导出图片模糊
    // // 下载Base64文件
    // downloadFileByBase64(url, fileName) {
    //   const a = document.createElement("a")
    //   a.setAttribute("href", url)
    //   a.setAttribute("download", fileName)
    //   a.setAttribute("target", "_blank")
    //   let clickEvent = document.createEvent("MouseEvents")
    //   clickEvent.initEvent("click", true, true)
    //   a.dispatchEvent(clickEvent)
    // },
    // onExport() {
    //   // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
    //   html2canvas(this.$refs.proReport, {
    //     // width: 30, //截图宽度
    //     // height: 50, //截图高度
    //     backgroundColor: '#fff', //画出来的图片有白色的边框,不要可设置背景为透明色（null）
    //     useCORS: true, //支持图片跨域
    //     scale: 1, //设置放大的倍数
    //   }).then((canvas) => {
    //     // 把生成的base64位图片上传到服务器,生成在线图片地址
    //     let url = canvas.toDataURL("image/png") // toDataURL: 图片格式转成 base64
    //     // console.log('base64图片地址', url)
    //     this.imgUrl = url
    //     this.downloadFileByBase64(url, '表格.png')
    //   })
    // }
    // 方法1 该方法导出图片模糊
    // onExport() {
    //   const clientWidth = this.$refs.proReport.offsetWidth
    //   const clientHeight = this.$refs.proReport.offsetHeight
    //   const kh = [clientWidth, clientHeight]

    //   // html2canvas(this.$refs.proReport, { useCORS: true, logging: true }).then((canvas) => {
    //   //   const dataURL = canvas.toDataURL('image/png')
    //   //   this.download(dataURL, kh)
    //   // })
    //   html2canvas(this.$refs.proReport).then((canvas) => {
    //     const dataURL = canvas.toDataURL('image/png')
    //     this.download(dataURL, kh)
    //   })
    // },
    // getUrlBase64(url, kh) {
    //   return new Promise((resolve) => {
    //     let canvas = document.createElement('canvas')
    //     const ctx = canvas.getContext('2d')
    //     const img = new Image()
    //     img.crossOrigin = 'Anonymous' // 允许跨域
    //     img.src = url
    //     img.onload = () => {
    //       canvas.height = kh[1]
    //       canvas.width = kh[0]
    //       ctx.drawImage(img, 0, 0, kh[0], kh[1])
    //       const dataURL = canvas.toDataURL('image/png')
    //       canvas = null
    //       resolve(dataURL)
    //     }
    //   })
    // },
    // download(imgUrl, kh) {
    //   this.getUrlBase64(imgUrl, kh).then((base64) => {
    //     const link = document.createElement('a')
    //     link.href = base64
    //     link.download = `图片.png`
    //     link.click()
    //   })
    // },
  }
}
</script>
<style lang="scss" scoped>
.home {

  h1,
  h2 {
    text-align: center;
  }

  .remark {
    text-align: left;
    padding: 0 0 0 6px;
    margin: -1px 0 0 0;
    height: 36px;
    line-height: 36px;
    border: 1px solid #EBEEF5;
    border-top-color: transparent;
  }

  .table-bottom {
    margin-top: -1px;
  }

  .export-btn {
    margin-top: 20px;
  }
}
</style>